{# 继承模板 #}
{% extends 'common/base.html' %}

{# 加载静态文件 #}
{% load staticfiles %}

{% block head_title %}天天生鲜-提交订单{% endblock head_title %}

{% block head_js %}
    <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script>
    $(function () {
        $('#order_btn').click(function () {
            // 获得商品ID
            var goods_id = $(this).attr('goods_id');
            // 拿到支付方式
            var pay_style = $('input[name="pay_style"]:checked').val();
            // csrf_token值
            var csrf_value = $('input[name="csrfmiddlewaretoken"]').val();
            $.post('{% url 'order:order_handle' %}', {'id': goods_id, 'pay': pay_style,
                'csrfmiddlewaretoken': csrf_value}, function (data) {
                    if (data.ret != 0)
                    {
                        window.location.href = '{% url "users:user_center_order" %}';
                    }
            });
        });
    });
    </script>
{% endblock head_js %}

{% block body %}

    {% include "common/status.html" %}

	<div class="search_bar clearfix">
        {# 加载头部logo #}
        {% include "common/goods_logo.html" %}

		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;提交订单</div>
        {# 加载头部搜索框 #}
        {% include "common/goods_search.html" %}

	</div>
	
	<h3 class="common_title">确认收货地址</h3>

	<div class="common_list_con clearfix">
		<dl>
			<dt>寄送到：</dt>
			<dd><input type="radio" name="" checked="">{{ user.user_addr }} （{{ user.user_recv }} 收） {{ user.user_phone }}</dd>
		</dl>
		<a href="{% url 'users:user_center_site' %}" class="edit_site" onclick="alert('编辑收货地址');">编辑收货地址</a>

	</div>

    {% csrf_token %}

	<h3 class="common_title">支付方式</h3>	
	<div class="common_list_con clearfix">
		<div class="pay_style_con clearfix">
			<input value="1" type="radio" name="pay_style" checked>
			<label class="cash">货到付款</label>
			<input value="2" type="radio" name="pay_style">
			<label class="weixin">微信支付</label>
			<input value="3" type="radio" name="pay_style">
			<label class="zhifubao"></label>
			<input value="4" type="radio" name="pay_style">
			<label class="bank">银行卡支付</label>
		</div>
	</div>

	<h3 class="common_title">商品列表</h3>
	
	<div class="common_list_con clearfix">
		<ul class="goods_list_th clearfix">
			<li class="col01">商品名称</li>
			<li class="col02">商品单位</li>
			<li class="col03">商品价格</li>
			<li class="col04">数量</li>
			<li class="col05">小计</li>		
		</ul>
        {% for cart in carts %}
            {% with goods=cart.cart_goods %}
            <ul class="goods_list_td clearfix">
                <li class="col01">{{ forloop.counter }}</li>
                <li class="col02"><img src="{% static goods.goods_image %}"></li>
                <li class="col03">{{ goods.goods_name }}</li>
                <li class="col04">{{ goods.goods_unit }}</li>
                <li class="col05">{{ goods.goods_price }}元</li>
                <li class="col06">{{ cart.cart_amount }}</li>
                <li class="col07">{{ cart.single }}</li>
            </ul>
            {% endwith %}
        {% endfor %}
	</div>

	<h3 class="common_title">总金额结算</h3>

	<div class="common_list_con clearfix">
		<div class="settle_con">
			<div class="total_goods_count">共<em>{{ carts.amount }}</em>件商品，总金额<b>{{ carts.total }}元</b></div>
			<div class="transit">运费：<b>10元</b></div>
			<div class="total_pay">实付款：<b>{{ carts.total|add:10 }}元</b></div>
		</div>
	</div>

	<div class="order_submit clearfix">
		<a href="javascript:;" id="order_btn" goods_id="{{ goods_list }}">提交订单</a>
	</div>	
{% endblock body %}

{#{% block foot_js %}#}
{#	<script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>#}
{#	<script type="text/javascript">#}
{#		$('#order_btn').click(function() {#}
{#			localStorage.setItem('order_finish',2);#}
{##}
{#			$('.popup_con').fadeIn('fast', function() {#}
{##}
{#				setTimeout(function(){#}
{#					$('.popup_con').fadeOut('fast',function(){#}
{#						window.location.href = 'index.html';#}
{#					});	#}
{#				},3000)#}
{#				#}
{#			});#}
{#		});#}
{#	</script>#}
{#{% endblock foot_js %}#}
